{extend name="layout/layout" /}

{block name="navbar"}{/block}

{block name="style"}
	<style>
		body, .mui-content{
			background: #fff;
		}

		.register{
			padding: 30px 20px;
		}

		.mui-input-group:before, .mui-input-group:after{
			height: 0;
		}

		.logo{
			margin-bottom: 20px;
		}

		.logo img{
			max-width: 100px;
		}

		.mui-input-row label{
			width: 20%;
			text-align: center;
		}

		.mui-input-row label~input{
			width: 80%;
			font-size: 14px;
		}

		.forget{
			margin-top: 20px;
			font-size:12px;
		}

		.forget a{
			text-decoration: underline;
		}

		.code-group{
			position: relative;
		}

		.code-group .code{
			position: absolute;
			right: 0px;
			top:5px;
			height: 30px;
			color:#e60012;
			border: 1px solid #e60012;
			font-size: 12px;
			text-align: center;
			padding: 0 10px;
			line-height: 30px;
			border-radius: 4px;
			width: 100px;
		}

		.code.disabled{
			background: #ccc;
			color:#fff;
			border-color: #ccc;
		}
	</style>
{/block}

{block name="main"}
	<div class="register" v-cloak>
		<div class="logo mui-text-center">
			<!-- <img src="/assets/img/logo.jpg"  alt=""> -->
		</div>

		<form class="mui-input-group">
			<div class="mui-input-row">
				<label><i class="mui-icon iconfont icon-shoujihao"></i></label>
				<input type="text" name="phone" v-model="userInfo.mobile" disabled="disabled" class="mui-input-clear" placeholder="请输入手机号">
			</div>

			<div class="mui-input-row code-group">
				<label><i class="mui-icon iconfont icon-yanzhengma"></i></label>
				<input type="text" name="code" v-model="code" class="mui-input-clear" placeholder="请输入验证码">
				<div class="code" :class="send_status==false?'disabled':''" @tap="sendCode()">获取验证码</div>
			</div>

			<div class="mui-input-row">
				<label><i class="mui-icon iconfont icon-mima"></i></label>
				<input type="password" name="password" v-model="password" class="mui-input-password" placeholder="请输入新支付密码">
			</div>

			<div class="mui-input-row">
				<label><i class="mui-icon iconfont icon-mima"></i></label>
				<input type="password" name="confirm_password" v-model="confirm_password" class="mui-input-password" placeholder="请输入确认密码">
			</div>

			<button class="mui-btn mui-btn-block mui-btn-theme" type="button" @tap="reset()">确定</button>
		</form>
	</div>
{/block}

{block name="script"}
	<script>

		var myVue = new Vue({
			el:'.register',
			data:{
				phone: '',
				code: '',
				password:'',
				confirm_password: '',
				send_status:true,
				userInfo:'',
			},
			mounted: function(){
				if(!token){
					location.href = '/mobile/user/login';
				}
				this.getUserInfo();
			},
			methods: {
				//获取用户信息
				getUserInfo: function(){
					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});
					var url =  'user/index';
					var that = this;
					request(that, {'url': url}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.userInfo = res.data.userInfo;
							that.phone = res.data.userInfo.mobile;
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				reset:function(){
					if(!this.code){
						mui.toast('请输入验证码');return;
					}

					if(!this.password) {
						mui.toast('支付密码不能为空');
						return;
					}

					if(!this.confirm_password){
						mui.toast('请输入确认密码');return;
					}

					if(this.password != this.confirm_password){
						mui.toast('两次密码不一致');return;
					}

					var preg = /^\d{6}$/;
					if(!preg.test(this.password)){
						mui.toast('支付密码由6位数字组成');return;
					}

					var url =  'user/resetPayPassword';
					var that = this;

					var formData = {
						token: token,
						code: that.code,
						password: that.password,
					};

					request(that, {'url': url, 'data': formData}, function(res){
						if(res.code == 200) {
							mui.toast(res.msg);
							mui.back();
						} else {
							mui.toast(res.msg);
						}	
					});

				},

				//发送验证码
				sendCode: function(){

					if(this.send_status != true){
						return;
					}

					
					var preg = /^1\d{10}$/;
					if(!preg.test(this.phone)){
						mui.toast('手机号码格式不正确');return;
					}

					//发送验证码
					var url =  'sms/send';
					var that = this;
					request(that, {'url': url, 'data': {'mobile': that.phone, 'event': 'resetpwd'}}, function(res){
						if(res.code == 200) {
							that.send_status = false;
							that.countdown();
						}	
						mui.toast(res.msg);
					});
				},
				//验证码合计时
				countdown: function(){
					var that = this;
					var time = 60;
					var start = setInterval(function(){
						time--;
						if(time <= 0){
							clearInterval(start);
							that.send_status = true;
							$('.code').text('获取验证码');

						} else {
							$('.code').text(time+'s 后重发');
						}
					},1000);
				}
			}
		});
	</script>
{/block}